<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="500" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :maskClosable="false">
    <a-spin :spinning="confirmLoading">
      <a-form :model="formState" @validateFields="handleOk" ref="formRef" layout="vertical" class="common-modal-content">
        <a-col :span="24">
          <a-form-item :label="$t('deviceManage.workShopCode')" name="code" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-model:value.trim="formState.code" :disabled="true" :placeholder="$t('common.systemAutoGenerate')" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('deviceManage.workShopName')" name="name" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('deviceManage.pleaseInputWorkShopName') }]">
            <a-input v-model:value.trim="formState.name" :placeholder="$t('deviceManage.pleaseInputWorkShopName')" />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item :label="$t('common.remark')" name="remark" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-textarea v-model:value.trim="formState.remark" />
          </a-form-item>
        </a-col>
      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{ $t('common.ok') }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="editDialog">
import { ref, onMounted } from 'vue';
import axios from '@/utils/request'
import { cloneDeep } from 'lodash'
import { message } from "ant-design-vue";
import i18n from '@/locales/index'
const { t } = i18n.global

const emits = defineEmits(['ok'])
const labelCol = {  span: 23 }
const wrapperCol = {  span: 23 }
let title = ref('')
let visible = ref(false)
let confirmLoading = ref(false)
let formState = ref({})
const formRef = ref()
const edit = (record) => {
  title.value = t('other.editWorkSpace')
  formState.value = record
  visible.value = true
}
const queryParams = (value) => {
  value.id = formState.value.id;
  return cloneDeep(value);
}
const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields();
    confirmLoading.value = true
    const res = await axios.postAction('/api/device/hanger-line-group/edit', queryParams(values))
    if (res.success) {
      emits('ok')
      message.success('成功')
      confirmLoading.value = false
      visible.value = false
    }
  } catch (err) {
    console.log('0000000', err);
  }
  confirmLoading.value = false
};
const handleCancel = () => {
  visible.value = false
  initModalStatus()

}
const initModalStatus = () => {
  confirmLoading.value = false
  formState.value = {}
  formRef.value.resetFields()
}
onMounted(async () => {
  visible.value = false
})
defineExpose({
  edit,
})

</script>